// tailwind.config.js
const plugin = require("tailwindcss/plugin");

// 宽高尺寸1-750px(2的倍数)
const sizeMaps = {
  "1/2": "50%",
  half: "50%",
  full: "100%",
};
for (let i = 1; i <= 375; i++) {
  sizeMaps[i * 2] = `${i * 2}rpx`;
}

//字体尺寸，10-100px
const fontSizeMaps = {};
for (let i = 10; i <= 100; i++) {
  fontSizeMaps[i] = `${i}rpx`;
}

//圆角尺寸，1-40px
const borderRadiusMaps = {
  full: "99999rpx",
};
for (let i = 1; i <= 40; i++) {
  borderRadiusMaps[i] = `${i}rpx`;
}

//行高尺寸 20-200px,2的倍数
const lineHeightMaps = {};
for (let i = 10; i <= 100; i++) {
  lineHeightMaps[i * 2] = `${i * 2}rpx`;
}

//透明度 0-100，10的倍数
const opacityMaps = {};
for (let i = 0; i <= 10; i++) {
  opacityMaps[i * 10] = `${i / 10}`;
}

module.exports = {
  purge: ["./public/index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  darkMode: false,
  separator: "__", // 兼容小程序，将 : 替换成 __
  theme: {
    fontSize: {
      ...fontSizeMaps,
    },
    height: {
      ...sizeMaps,
    },
    width: {
      ...sizeMaps,
    },
    borderRadius: {
      ...borderRadiusMaps,
    },
    lineHeight: {
      ...lineHeightMaps,
    },
    translate: {
      ...sizeMaps,
    },
    colors: {
      fff: "#fff",
    },
    opacity: {
      ...opacityMaps,
    },
    bgImage: {
      back: "'https://hellosanbao.oss-cn-hangzhou.aliyuncs.com/back.png'",
    },
    boxShadow: {
      "normal-": "111",
    },
    borderWidth: {
      1: "1rpx",
      2: "2rpx",
      3: "3rpx",
      4: "4rpx",
    },
  },
  plugins: [
    plugin(function ({ addComponents, matchUtilities, theme }) {
      //自定义背景图
      matchUtilities(
        {
          "bg-img": (value) => {
            return {
              background: `url(${value}) no-repeat center/100% 100%`,
            };
          },
        },
        { values: theme("bgImage") }
      );

      //自定义box-shadow
      matchUtilities(
        {
          "box-shadow": (value) => ({
            boxShadow: value,
          }),
        },
        { values: theme("boxShadow") }
      );

      // 扩张点击区域
      addComponents({
        ".expand-click": {
          position: "relative",
          "&::after": {
            content: "''",
            position: "absolute",
            top: "-10px",
            left: "-10px",
            right: "-10px",
            bottom: "-10px",
          },
        },
      });
    }),
  ],
  corePlugins: {
    // 兼容小程序，将带有 * 选择器的插件禁用
    preflight: false,
    divideColor: false,
    divideOpacity: false,
    divideStyle: false,
    divideWidth: false,
    space: false,
    placeholderColor: false,
    placeholderOpacity: false,
  },
};
